<template>
    <el-tabs style="width:100%;">
        <el-tab-pane label="二维码管理">
            <section>
                <!--工具条-->
                <el-col :span="24" class="toolbar">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <!-- <el-form-item>
                            <el-input v-model="formInline.user" placeholder="姓名"></el-input>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button @click='reflist'>查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!--表格-->
                <template>
                    <!--data按照指定数组格式传进来就会自动渲染表格数据-->
                    <!--v-loading为真时，显示loading动画-->
                    <el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%; height:500px">
                        <el-table-column type="index">
                        </el-table-column>
                        <el-table-column prop="html" label="内容" sortable>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template scope="scope">
                                <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <!--分页-->
                <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
                        :page-size="currentPageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableDataLength"
                        style="float:right">
                    </el-pagination>
                </el-col>
            </section>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
    import util from "../../common/util";
    import NProgress from "nprogress";
    import axios from "axios";
    import moment from "moment";
    import QRCode from "qrcodejs2";
    export default {
        data() {
            return {
                formInline: {},
                tableData: [],
                tableDataLength: 0,
                listLoading: false,
                currentPage: 1,
                currentPageSize: 10
            };
        },
        created() {
            this.getQRList();
        },
        methods: {
            reflist() {
                this.getQRList();
            },
            handleEdit(row) {
                this.$router.push({ path: '/page?id=' + row.getid })
            },
            handleDel(row) {
                console.log(row)
                var _this = this;
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    _this.listLoading = true;
                    NProgress.start();
                    axios.get(`/api/qrcode/delete?id=${row._id}`).then(function (res) {
                        if (res.data.success) {
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            _this.listLoading = false;
                            NProgress.done();
                            _this.getQRList()
                        } else {
                            _this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })
                }).catch(() => {

                });
            },
            handleSizeChange(val) {
                this.$data.currentPageSize = val;
                this.getQRList();
            },
            handleCurrentChange(val) {
                this.$data.currentPage = val;
                this.getQRList();
            },
            getQRList: function () {
                var vm = this;
                var params = {
                    limit: vm.$data.currentPageSize,
                    page: vm.$data.currentPage
                };
                axios.get("/api/qrcode/getlist", { params: params }).then(function (res) {
                    vm.$data.tableData = res.data.data;
                    vm.$data.tableDataLength = res.data.meta.count;
                });
            }
        },
    };
</script>
<style lang="scss" scoped>
</style>